<template>
  <div class="person">
    <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
    <h2>水温:{{ temp }}</h2>
    <h2>水位:{{ height }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+5</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { reactive, ref, watch ,watchEffect } from "vue";
  // 数据
  let temp = ref(0)
  let height = ref(0)

  //方法
  function changeTemp() {
    temp.value += 10
  }
  function changeHeight() {
    height.value += 5
  }

  //用watch监视
  // watch([temp, height], (val) => {
  //   const [newTemp, newHeight] = val
  //   //水温达到50℃，或水位达到20cm,联系服务器
  //   if (newTemp >= 50 || newHeight >= 20) {
  //       console.log('联系服务器');
        
  //   }
  // })

  const stopWatch = watchEffect(()=>{
    if (temp.value >= 50 || height.value >= 20) {
        console.log('联系服务器');
    }

    if (temp.value === 100 || height.value === 50) {
        console.log('清理监听');
        stopWatch()
    }
  })




</script>
<style scoped>
  .person {
    width: 100%;
    background-color: skyblue;
    box-shadow: 0px 1px 2px #ddd;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
</style>
